<template>
  <div class="box">
    <div class="noticebar">批阅</div>
    <div class="testContent">
      <div class="testQuestionBox">
        <p class="testQuestion">测试课程</p>

        <div>
          <div class="bigbox" v-for="(oneq, idx) in allq" :key="idx">
            <div class="questionTitle">
              <div>
                {{ oneq.name }}<br />

                <p class="qtitle">DB的三级模式结构是对()进行抽象的三个级别:</p>
                <p
                  style="font-size: 13px"
                  class="qcontent"
                  v-for="(onepd, idx) in allpd"
                  :key="idx"
                >
                  {{ onepd.pdtext }}
                </p>
              </div>
              <div class="testpd">
                <div>
                  <span>学生答案：{{ oneq.studentpd }} </span>
                  <span style="color: #63cc9c"
                    >正确答案:{{ oneq.rightpd }}</span
                  >
                </div>
                <div>
                  <span class="score">得分:</span>
                  <input
                    style="width: 30px; margin-left: -20px"
                    type="text"
                  />分
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="testProgressBox">
        <div class="information">
          <div>
            <img class="txImg" :src="infoImg" alt="这里是图片" />
          </div>
          <div class="userInfo">
            前端 <br />
            20211717
            <br />
            2000班20号
          </div>
        </div>
        <div class="testProgress">
          <el-radio v-model="radio" label="1" class="checkOneBtn"
            >显示客观题</el-radio
          >
          <div class="optionBtn">
            <div
              v-for="(q, idx) in allq"
              :key="idx"
              class="checkAllBtn"
              @click="getid(idx)"
              :class="{ active: changeColor == idx }"
            >
              {{ idx + 1 }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CorrectingChild",
  data() {
    return {
      changeColor: 0,
      istrue: true,
      radio: "",
      question: [],
      allq: [
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第一题",
        },
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第二题",
        },
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第三题",
        },
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第四题",
        },
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第五题",
        },
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第六题",
        },
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第七题",
        },
        {
          index: 2,
          rightpd: "y",
          studentpd: "x",
          name: "第八题",
        },
      ],
      allpd: [
        {
          pdtext: "A:学习六中全会精神这些表述要精读热",
        },
        {
          pdtext: "B: Vue2.0支持嵌套v-for吗? -中文- Vue Forum",
        },
        {
          pdtext: "C:yue基于代码生成器和BPM的低代码快速开发平台",
        },
      ],
      infoImg: require("../../../../assets/touxiang.jpg"),
    };
  },
  created() {},

  methods: {
    getid(idx) {
      this.changeColor = idx;
      // this.istrue = !this.istrue;
      console.log(document.getElementsByClassName("bigbox"));
      document.getElementsByClassName("bigbox")[idx].scrollIntoView();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background: #f2f4f7;
  min-height: 100vh;
}
.blue {
  background-color: #e6f0ff;
}

.bigbox + .bigbox {
  margin-top: 20px;
}
.qcontent {
  margin-top: 10px;
}
.qcontent + .qcontent {
  margin-top: 10px;
}
.qtitle {
  margin-top: 10px;
}
.noticebar {
  width: 100%;
  height: 40px;
  background-color: #384b66;
  text-align: center;
  line-height: 40px;
  color: white;
}
.testContent {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  margin-top: 30px;
}
.testQuestionBox {
  background-color: white;
  flex: 1;
  padding-left: 30px;
}
.testQuestion {
  height: 50px;
  font-size: 1.5em;
  line-height: 50px;
}
.testProgressBox {
  margin-left: 20px;
  width: 30%;
  background-color: white;
}
.checkOneBtn {
  padding-left: 25px;
  padding-top: 25px;
}
.questionTitle {
  line-height: 30px;
}
.optionBtn {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.checkAllBtn {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  margin-left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background-color: #e6f0ff;
}
.active {
  background-color: blue;
}

.testpd {
  background-color: #f2f4f7;
  width: 90%;
  height: 60px;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}
.score {
  margin-right: 30px;
}
.information {
  width: 100%;
  height: 100px;
  display: flex;
  // justify-content: space-between;
  // text-align: center;
}
.txImg {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-left: 50px;
  margin-top: 20px;
}
.userInfo {
  margin-left: 20px;
  margin-top: 30px;
  width: 100%;
}
</style>